<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <title>人事管理系统 ——职位管理</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="pragma" content="no-cache"/>
    <meta http-equiv="cache-control" content="no-cache"/>
    <meta http-equiv="expires" content="0"/>
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"/>
    <meta http-equiv="description" content="This is my page"/>
    <link href="../css/css.css" type="text/css" rel="stylesheet"/>
    <link rel="stylesheet" type="text/css" href="../js/ligerUI/skins/Aqua/css/ligerui-dialog.css"/>
    <link href="../js/ligerUI/skins/ligerui-icons.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
    <script type="text/javascript" src="../js/jquery-migrate-1.2.1.js"></script>
    <script src="../js/ligerUI/js/core/base.js" type="text/javascript"></script>
    <script src="../js/ligerUI/js/plugins/ligerDrag.js" type="text/javascript"></script>
    <script src="../js/ligerUI/js/plugins/ligerDialog.js" type="text/javascript"></script>
    <script src="../js/ligerUI/js/plugins/ligerResizable.js" type="text/javascript"></script>
    <link href="../css/pager.css" type="text/css" rel="stylesheet"/>

    <script src="../js/a/vue.js"></script>
    <script src="../js/a/axios-0.18.0.js"></script>
    <script src="../js/a/axios-config.js"></script>
    <link rel="stylesheet" href="../css/index.css">
    <script src="../js/a/index.js"></script>

</head>
<body>
<!-- 导航 -->
<div id="app">
    <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td height="10"></td>
        </tr>
        <tr>
            <td width="15" height="32"><img src="../images/main_locleft.gif" width="15" height="32"></td>
            <td class="main_locbg font2"><img src="../images/pointer.gif">&nbsp;&nbsp;&nbsp;当前位置：职位管理 &gt; 职位查询</td>
            <td width="15" height="32"><img src="../images/main_locright.gif" width="15" height="32"></td>
        </tr>
    </table>

    <table width="100%" height="90%" border="0" cellpadding="5" cellspacing="0" class="main_tabbor">
        <!-- 查询区  -->
        <tr valign="top">
            <td height="30">
                <table width="100%" border="0" cellpadding="0" cellspacing="10" class="main_tab">
                    <tr>
                        <td class="fftd">

                            <table width="100%" border="0" cellpadding="0" cellspacing="0">
                                <tr>
                                    <td class="font3">
                                        职位名称：<input type="text" name="name" v-model="params.postName">
                                        <input type="submit" value="搜索" v-on:click="selectJob()"/>
                                        <input type="button" value="删除" v-on:click="delJob()"/>
                                    </td>
                                </tr>
                            </table>

                        </td>
                    </tr>
                </table>
            </td>
        </tr>

        <!-- 数据展示区 -->
        <tr valign="top">
            <td height="20">
                <table width="100%" ref="table" border="1" cellpadding="5" cellspacing="0"
                       style="table-layout:fixed;border:#c2c6cc 1px solid; border-collapse:collapse;">
                    <thead>
                    <tr class="main_trbg_tit" align="center">
                        <th><input type="checkbox" name="checkAll" id="checkAll" v-on:click="checkboxAll($event)"></th>
                        <th>职位名称</th>
                        <th>详细信息</th>
                        <th align="center">操作</th>
                    </tr>
                    </thead>
                    <tbody ref="table">
                    <colgroup>
                        <col width="5%">
                        <col width="30%">
                        <col width="55%">
                        <col width="10%">
                    </colgroup>
                    <tr v-for="job in jobCheck" :key="job.id" align="center" class="main_trbg"
                        style="background-color: rgb(255, 255, 2545);">
                        <td><input type="checkbox" class="checkAll" v-bind:value="job.id"></td>
                        <td>{{job.postName}}</td>
                        <td style="width:100px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;">
                            {{job.remark}}
                        </td>
                        <td align="center" width="40px;">
                            <a v-bind:href="'showUpdateJob.html?id='+job.id+'&postName='+job.postName+'&remark='+job.remark+'&status='+job.status">
                                <img title="修改" src="../images/update.gif">
                            </a>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <!-- 分页标签 -->
        <tr valign="top">
            <td align="center" class="font3">
                <table width="100%" align="center" style="font-size:13px;" class="digg">
                    <tbody>
                    <tr>
                        <el-pagination
                                @size-change="changeSize"
                                @current-change="changeNum"
                                :current-page.sync="params.pageNum"
                                :page-sizes="[3, 5, 10, 20]"
                                :page-size.sync="params.pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total">
                        </el-pagination>
                        <!--            <td style="COLOR: #0061de; MARGIN-RIGHT: 3px; PADDING-TOP: 2px; TEXT-DECORATION: none"><span class="disabled" @click="handleSizeChange">上一页</span><span-->
                        <!--                class="current" v-model="params.pageNum">1</span><span @click="handleSizeChange">下一页</span>&nbsp;跳转到&nbsp;&nbsp;<input-->
                        <!--                style="text-align: center;BORDER-RIGHT: #aaaadd 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #aaaadd 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #aaaadd 1px solid; COLOR: #000099; PADDING-TOP: 2px; BORDER-BOTTOM: #aaaadd 1px solid; TEXT-DECORATION: none"-->
                        <!--                type="text" size="2" id="pager_jump_page_size">&nbsp;<input type="button"-->
                        <!--                                                                            style="text-align: center;BORDER-RIGHT: #dedfde 1px solid; PADDING-RIGHT: 6px; BACKGROUND-POSITION: 50% bottom; BORDER-TOP: #dedfde 1px solid; PADDING-LEFT: 6px; PADDING-BOTTOM: 2px; BORDER-LEFT: #dedfde 1px solid; COLOR: #0061de; MARGIN-RIGHT: 3px; PADDING-TOP: 2px; BORDER-BOTTOM: #dedfde 1px solid; TEXT-DECORATION: none"-->
                        <!--                                                                            value="确定" id="pager_jump_btn"></td>-->
                        <!--          </tr>-->
                    <tr align="center">
                        <td style="font-size:13px;"></td>
                    </tr>
                    <tr>
                        <td style="COLOR: #0061de; MARGIN-RIGHT: 3px; PADDING-TOP: 2px; TEXT-DECORATION: none">总共&nbsp;{{total}}&nbsp;条记录，当前显示{{(params.pageNum-1)*params.pageSize
                            + 1}}-{{(params.pageNum-1)*params.pageSize + params.pageSize}}条记录。
                        </td>
                    </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </table>
    <div style="height:10px;"></div>
</div>
<script>
    vm = new Vue({
        el: '#app',
        data: {
            jobObj: [],
            jobCheck: [],
            total: 0,
            params: {
                pageNum: 1,
                pageSize: 5,
                postName: ''
            },
        },
        methods: {
            //查询全部的职位
            selectJob() {
                axios.get('/api/post/page', {
                    params: this.params
                }).then(res => {
                    if (res.data.code == '200') {
                        this.jobObj = res.data.data.list;
                        this.jobCheck = res.data.data.list;
                        this.total = res.data.data.total;
                    } else if (res.data.msg) {
                        this.$message.error(res.data.msg);
                    } else {
                        this.$message.error('系统错误');
                    }
                }).catch(err => {
                    this.$message.error(err);
                    console.log(err);
                });
            },
            changeSize(pageSize) {//改变每页条数时执行的函数
                this.params.pageSize = pageSize;
                this.selectJob();
            },
            changeNum(pageNum) {//改变页码时执行的函数
                this.params.pageNum = pageNum;
                this.selectJob();
            },
            //多选框的全选，全部取消
            checkboxAll(e) {
                let checked = e.target.checked;
                let checkDom = this.$refs.table.getElementsByClassName("checkAll");
                if (checked) {
                    for (let i = 0; i < checkDom.length; i++) {
                        checkDom[i].checked = true;
                    }
                } else {
                    for (let i = 0; i < checkDom.length; i++) {
                        checkDom[i].checked = false;
                    }
                }
            },
            //删除功能
            delJob() {
                let ids = [];
                let checkDom = this.$refs.table.getElementsByClassName("checkAll");
                for (let i = 0; i < checkDom.length; i++) {
                    if (checkDom[i].checked == true) {
                        ids.push(checkDom[i].value);
                    }
                }
                $.ligerDialog.confirm("确认要删除" + ids.join() + "吗?", "删除职位", (r) => {
                    if (r) {
                        let formData = new FormData()
                        formData.append('ids', ids.join());
                        axios.post('/api/post/removes', formData)
                            .then(res => {
                                    if (res.data.code == 200) {
                                        this.selectJob();
                                        this.$message.success(res.data.msg)
                                    } else if (res.data.msg) {
                                        this.$message.error(res.data.msg);
                                    } else {
                                        this.$message.error('系统错误');
                                    }
                                }
                            )
                    }
                });
            },
        },
        created() {
            this.selectJob();
        },
    })
</script>
</body>
</html>
